<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    li {
      list-style: none;
    }

    img {
      vertical-align: top;
    }

    .cl::after {
      content: ".";
      display: block;
      clear: both;
      height: 0;
      overflow: hidden;
      visibility: hidden;
    }

    .wrapAll {
      width: 1226px;
      margin: 50px auto;
      /* background-color: grey; */
    }

    .wrapAll .left {
      width: 400px;
      float: left;
    }

    .wrapAll .left .showGoods {
      width: 400px;
      height: 400px;
      position: relative;
    }

    .wrapAll .left .shadow {
      width: 200px;
      height: 200px;
      background-color: rgba(0, 0, 0, 0.5);
      position: absolute;
      left: 0;
      top: 0;
      cursor: all-scroll;
      display: none;
    }

    .wrapAll .left img {
      width: 100%;
      height: 100%;
    }

    .wrapAll .left .showList {
      width: 100%;
      display: flex;
      margin-top: 10px;
    }

    .wrapAll .left .showList li {
      flex: 1;
      border: 2px solid transparent;
    }

    .wrapAll .left .showList .active {
      border-color: red;
    }

    .wrapAll .left .showList li+li {
      margin-left: 10px;
    }

    .wrapAll .right {
      width: -webkit-calc(100% - 400px - 20px);
      min-height: 500px;
      float: right;
      /* background-color: pink; */
      position: relative;
    }

    .scaleGoods {
      position: absolute;
      width: 500px;
      height: 500px;
      background-color: rgba(125, 255, 255, 0.5);
      overflow: hidden;
      display: none;
    }

    .scaleGoods img {
      width: 1000px;
      height: 1000px;
      position: absolute;
      left: 0;
      top: 0;
      /* z-index: -1; */
    }
  </style>
</head>

<body>
  <div class="wrapAll cl">
    <div class="left">
      <div class="showGoods">
        <img class="smallImg" src="../images/girlsmall1.jpg" alt="">
        <div class="shadow"></div>
      </div>
      <ul class="showList">
        <li class="active"><img src="../images/girlsmall1.jpg" bigUrl="../images/girlbig1.jpg" alt=""></li>
        <li><img src="../images/girlsmall2.jpg" bigUrl="../images/girlbig2.jpg" alt=""></li>
        <li><img src="../images/girlsmall3.jpg" bigUrl="../images/girlbig3.jpg" alt=""></li>
        <li><img src="../images/girlsmall4.jpg" bigUrl="../images/girlbig4.jpg" alt=""></li>
      </ul>
    </div>
    <div class="right">
      <div class="scaleGoods">
        <img class="bigImg" src="../images/girlbig1.jpg" alt="">
      </div>
    </div>
  </div>
</body>
<script>

  // 放大镜的实现步骤
  // 1. 等比例放大  (布局)   => (如何设置)
  //    shadow          smallImg       shadow移动的距离
  // ————————————  =  ————————————  = —————————————————
  //   scaleGoods        bigImg        bigImg移动的距离

  // 2. 左边移动的是shadow 右边移动的是bigImg (布局)
  // 3. shadow移动的距离 和 bigImg移动的距离也是等比例 且是反向的(参照物观念) 

  var showGoods = document.querySelector(".showGoods");
  var scaleGoods = document.querySelector(".scaleGoods");
  var shadow = document.querySelector(".shadow");
  var bigImg = document.querySelector(".bigImg");
  var smallImg = document.querySelector(".smallImg");

  var liList = document.querySelectorAll(".showList li");

  // 问题?
  // clientWidth / clientHeight 快捷获取元素的宽高 => 
  // 缺点:对于隐藏的元素 clientWidth / clientHeight 不生效 都是0 
  // 导致:  maxLeft maxTop sacle 有问题?

  // 怎么解决?
  // (1) 借助传统的 获取非行内样式
  // (2) 对于隐藏的元素, 就等 元素显示之后再获取 

  var maxLeft = null;
  var maxTop = null;
  var sacle = null; // 2.5

  showGoods.onmouseenter = function () {
    shadow.style.display = "block";
    scaleGoods.style.display = "block";

    maxLeft = showGoods.clientWidth - shadow.clientWidth;
    maxTop = showGoods.clientHeight - shadow.clientHeight;
    sacle = bigImg.clientWidth / smallImg.clientWidth; // 2.5
    console.log(bigImg.clientWidth, smallImg.clientWidth);
  }
  showGoods.onmouseleave = function () {
    shadow.style.display = "none";
    scaleGoods.style.display = "none";
  }
  showGoods.onmousemove = function (e) {
    var e = e || window.event;
    var x = e.pageX - this.offsetLeft - shadow.clientWidth / 2;
    var y = e.pageY - this.offsetTop - shadow.clientHeight / 2;

    // 移动之前判断 是否超出临界值 (小于最小值  大于最大值)
    if (x < 0) x = 0;
    if (x > maxLeft) x = maxLeft;
    if (y < 0) y = 0;
    if (y > maxTop) y = maxTop;

    shadow.style.left = x + "px";
    shadow.style.top = y + "px";

    bigImg.style.left = -sacle * x + "px";
    bigImg.style.top = -sacle * y + "px";
  }

  var smallImgList = ["../images/girlsmall1.jpg", "../images/girlsmall2.jpg", "../images/girlsmall3.jpg", "../images/girlsmall4.jpg"];
  var bigImgList = ["../images/girlbig1.jpg", "../images/girlbig2.jpg", "../images/girlbig3.jpg", "../images/girlbig4.jpg"];

  for (let i = 0; i < liList.length; i++) {
    let li = liList[i];
    li.onmouseenter = function () {
      for (let j = 0; j < liList.length; j++) {
        liList[j].className = "";
      }
      this.className = "active";


      smallImg.src = smallImgList[i];

      bigImg.src = bigImgList[i];

    }
  }

  function getStyle(ele, attr) {
    if (window.getComputedStyle) {
      return window.getComputedStyle(ele)[attr];
    } else {
      return ele.currentStyle[attr];
    }
  }

</script>

</html>